<template>
   <div class="good-list-wrap">
      <!-- 英语类型 -->
      <div class="english-wrap">
        <div class="list" 
          v-for="(item,index) in goodList" 
          :key="index"
          :style="{background: item.bgColor}"
        >
          <div class="left-content">
            <div class="name">{{item.title}}</div>
            <div class="desc">
             {{item.desc}}
            </div>
          </div>
          <div class="img-wrap">
            <img :src="item.file" alt="">
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'TeachersTyep',
  props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  components: {
  },
  data() {
    return {
      goodList: this.dateFactory.goodList,
      ruleFormLocal:this.dateFactory.ruleForm,
    }
  },
   watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        this.diyData[this.index].ruleForm = newValue
        if (this.ruleFormLocal.page == 'AboutWe') {
           this.$EventBus.$emit('diyFactoryAboutMe', this.diyData)
        } else if (this.ruleFormLocal.page == 'CurriculumSchedule') {
            this.$EventBus.$emit('diyFactoryCurriShe', this.diyData)
        } else if (this.ruleFormLocal.page == 'Home') {
           this.$EventBus.$emit('diyFactory', this.diyData)
        }else if (this.ruleFormLocal.page == 'ArticleDetail') {
           this.$EventBus.$emit('diyFactoryArticleDetail', this.diyData)
        }else if (this.ruleFormLocal.page == 'MyPage') {
           this.$EventBus.$emit('diyFactoryMyPage', this.diyData)
        }
      },
      deep: true,
    }
  },
}
</script>

<style lang="less" scoped>
  .good-list-wrap {
    background: #fff;
  }
  // 操作
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
      .el-form-item {
        .side {
          display: flex;
          align-items: center;
          align-items: center;
          .el-slider {
            flex: 1;
          }
          &> span {
            margin-left: 14px;
          }
        }
      }
    }
  }

  // 英语类型 1
  .english-wrap {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    width: 358px;
    margin: 0 auto;
    padding-top: 15px;
    .list {
      box-sizing: border-box;
      padding: 0 10px;
      margin-bottom: 2%;
      width: 49%;
      height: 57px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #e6f4ff;
      margin-right: 2%;
      &:nth-child(2n) {
        margin-right: 0;
      }
      .left-content {
        flex: 1;
      }
      .name {
        font-size: 14px;
        color: #2b343b;
        font-weight: 700;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 110px;
      }
      .desc {
        font-size: 12px;
        color: #2b343b;
         overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 110px;
      }
      .img-wrap {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
</style>